<template>
    <div>
        <equipment>
            <h3 slot="title1">机械设备</h3>
            <span slot="title1">PRODUCT</span>
                <div slot="s" :class="index==$index?'actives':''" @click="btn($index)" v-for="(i,$index) in acr" :key="'a'+$index">
                    {{i}}
                </div>
                
            <div class="equipment_content_c animate__animated animate__fadeInUp animate__delay-0.5s" slot="a">
                
                    <div class="equipment_content_c_list" v-show="index==0"  v-for="(i,$index1) in atr4" :key="'1'+$index1">
                        <router-link :to="'/asdfgh'+i.t">
                            <div class="equipment_content_c_list_img"><img :src="i.i" alt=""></div>
                            <h3>{{i.t}}</h3>
                            <span>{{i.c}}</span>
                        </router-link>  
                    </div>
                
                <div class="equipment_content_c_list animate__animated animate__fadeInUp animate__delay-0.5s" v-show="index==1"  v-for="(i,$indexa) in atr1" :key="'2'+$indexa">
                    <router-link :to="'/asdfgh'+i.t">
                        <div class="equipment_content_c_list_img"><img :src="i.i" alt=""></div>
                        <h3>{{i.t}}</h3>
                        <span>{{i.c}}</span>
                    </router-link>
                </div>
                <div class="equipment_content_c_list animate__animated animate__fadeInUp animate__delay-0.5s" v-show="index==2"  v-for="(i,$indexb) in atr2" :key="'3'+$indexb">
                    <router-link :to="'/asdfgh'+i.t">
                        <div class="equipment_content_c_list_img"><img :src="i.i" alt=""></div>
                        <h3>{{i.t}}</h3>
                        <span>{{i.c}}</span>
                    </router-link>
                </div>
                <div class="equipment_content_c_list animate__animated animate__fadeInUp animate__delay-0.5s" v-show="index==3"  v-for="(i,$indexc) in atr3" :key="'4'+$indexc">
                <router-link :to="'/asdfgh'+i.t">
                    <div class="equipment_content_c_list_img"><img :src="i.i" alt=""></div>
                    <h3>{{i.t}}</h3>
                    <span>{{i.c}}</span>
                </router-link>
                </div>
            </div>
        </equipment>
    </div>
</template>
<script>
export default {
    data() {
        return{
            atr1:[
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备01',
                    c:'mechanical equipment',
                    a:'1'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备02',
                    c:'mechanical equipment',
                    a:'1'
                }
            ],
            atr2:[
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备03',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备04',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备05',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备06',
                    c:'mechanical equipment',
                    a:'2'
                }
            ],
            atr3:[
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备07',
                    c:'mechanical equipment',
                    a:'3'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备08',
                    c:'mechanical equipment',
                    a:'3'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备09',
                    c:'mechanical equipment',
                    a:'3'
                }
            ],
            atr4:[
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备01',
                    c:'mechanical equipment',
                    a:'1'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备02',
                    c:'mechanical equipment',
                    a:'1'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备03',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备04',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备05',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备06',
                    c:'mechanical equipment',
                    a:'2'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备07',
                    c:'mechanical equipment',
                    a:'3'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备08',
                    c:'mechanical equipment',
                    a:'3'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZThhYmI4OGU5MGI3MTIzNmM2YzA3NzI1ZjExZmRiYTctNDAweDIwMC05MC53ZWJw.webp',
                    t:'机械设备09',
                    c:'mechanical equipment',
                    a:'3'
                }
            ],
            acr:['全部','别墅','商品房','酒店'],
            index:0,
        }
    },
    methods:{
        btn(index){
            this.index=index
            console.log(this.index);
        }
    }
}
</script>
<style>
.equipment_content_c{
    width: 70%;
    margin: 0 auto;
}
.equipment_content_c_list{
    width: 30%;
    height: 260px;
    display: inline-block;
    margin-left: 1%;
    margin-bottom: 20px;
}
.equipment_content_c_list_img{
    width: 100%;
    
}
.equipment_content_c_list_img>img{
    width: 100%;
    height: 200px;
}
.equipment_content_c_list>h3{
    text-align: center;
}
.equipment_content_c_list>span{
    text-align: center;
    display: block;
    color: #ccc;
}
</style>